<template>
	<div class="myintergralwrap">
		<div class="myintergralwrap-title">我的积分<span class="myintergralwrap-title-span">当前积分：<span>{{allsort}}</span></span></div>
		<div class="intergralorderwrap-text">
			<div class="intergralorderwrap-text-every" v-for="data in datas" :key="data.orderid">
				<div class="intergralorderwrap-text-every-title"><span>订单号：{{data.orderid}}</span><span>下单日期:{{data.ordertime}}</span><span>订单状态:<strong>已完成</strong></span></div>
				<div class="intergralorderwrap-text-every-text">
					<div class="intergralorderwrap-text-every-text-div1">
						<span><img :src="data.orderimg" alt=""></span>
						<span>{{data.ordername}}</span>
						<span>{{data.ordertype}}</span>
						<span>x{{data.ordernum}}</span>
					</div>
					<div>积分：{{data.ordersort}}</div>
					<div>
						<router-link to="" class="lookintetral">查看详情</router-link>
						<span class="deleatorder" @click="deleatorder" :orderid="data.orderid">删除订单</span>
					</div>
				</div>
			</div>
			<el-pagination  @current-change="handleCurrentChange" :current-page="1"
			layout="prev, pager, next, jumper"  :background="true" class="fenxi" :page-count="allcount" :hide-on-single-page="true">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				datas:null,
				allcount:5,
				allsort:null,
			}
		},
		created(){
			var userphone=localStorage.getItem("userphone");
			this.allsort=this.$store.state.userinfor.userintegral;
			var _this=this;
			this.$axios.post("http://localhost:3000/userinfor/userordersort",{userphone:userphone})
			.then(function(response){
				// window.console.log(response)
				var list=response.data;
				// window.console.log(list)
				if(list.code==200){
					_this.datas=list.text;
					_this.allcount=list.zongyeshuo
				}
			}).catch(function (error) {
					window.console.log(error);
				})
		},
		methods:{
			handleCurrentChange(val) {
				// window.console.log(`当前页: ${val}`);
				var userphone=localStorage.getItem("userphone");
				var _this=this;
				this.$axios.post("http://localhost:3000/userinfor/ordersortpageChange",{userphone:userphone,page:val})
				.then(function(response){
					// window.console.log(response)
					var list=response.data;
					if(list.code==200){
						_this.datas=list.text;
					}
				}).catch(function (error) {
						window.console.log(error);
					})
			},
			deleatorder(e){
				var orderid=e.target.getAttribute("orderid");
				this.$axios.post("http://localhost:3000/userinfor/deleatordersort",{orderid:orderid})
				.then(function(response){
					// window.console.log(response)
					var list=response.data;
					if(list.code==200){
						location.reload()
					}
				}).catch(function (error) {
						window.console.log(error);
					})
			}
		}
	}
</script>

<style>
	.myintergralwrap-title-span{
		float: right;
		width: 20%;
	}
	.myintergralwrap-title-span span{
		color: #f08200;
	}
	.intergralorderwrap-text-every{
		height: 168px;
		border: 1px solid #c1c1c1;
		width: 94%;
		margin-left: 3%;
		margin-top: 20px;
	}
	.intergralorderwrap-text-every-title{
		height: 46px;
		line-height: 46px;
		background: #c1c1c1;
	}
	.intergralorderwrap-text-every-title span:nth-of-type(1){
		margin-left: 3%;
	}
	.intergralorderwrap-text-every-title span:nth-of-type(2){
		margin-left: 15%;
	}
	.intergralorderwrap-text-every-title span:nth-of-type(3){
		float: right;
		margin-right: 3%;
	}
	.intergralorderwrap-text-every-title strong{
		font-weight: normal;
		color:#f08200;
	}
	.intergralorderwrap-text-every-text{
		height: 122px;
	}
	.intergralorderwrap-text-every-text div{
		float: left;
		height: 122px;
		line-height: 122px;
	}
	.intergralorderwrap-text-every-text div:nth-of-type(1){
		width: 60%;
		height: 100%;
	}
	.intergralorderwrap-text-every-text div:nth-of-type(2){
		width: 22%;
		height: 100%;
		text-align: center;
		border-left: 1px solid #c1c1c1;
		border-right: 1px solid #c1c1c1;
	}
	.intergralorderwrap-text-every-text div:nth-of-type(3){
		width: 17%;
	}
	.intergralorderwrap-text-every-text-div1 span:nth-of-type(1){
		float: left;
		width: 78px;
		height: 78px;
		border: 1px solid #c1c1c1;
		margin-top: 20px;
		margin-left: 3%;
		background-size: 100% 100%;
	}
	.intergralorderwrap-text-every-text-div1 img{
		width: 100%;
		height: 100%;
	}
	.intergralorderwrap-text-every-text-div1 span:nth-of-type(2){
		float: left;
		margin-left: 2%;
	}
	.intergralorderwrap-text-every-text-div1 span:nth-of-type(3){
		float: left;
		margin-left: 20%;
	}
	.intergralorderwrap-text-every-text-div1 span:nth-of-type(4){
		float: left;
		margin-left: 20%;
	}
	.lookintetral{
		float: left;
		width: 100%;
		height: 62px;
		line-height: 62px;
		text-align: center;
	}
	.deleatorder{
		float: left;
		width:90px ;
		height: 30px;
		line-height: 30px;
		text-align: center;
		background: #f08200;
		margin-left: 20%;
		color: white;
		border-radius: 5px;
		cursor: pointer;
	}
	.pagehome{
		margin-top: 20px;
		margin-left: 20%;
		margin-bottom: 20px;
	}
</style>
